import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  PieChartOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {connect} from "react-redux"
import {NavLink,Route,Switch} from "react-router-dom"

import Home from "./components/Home"
import Table from "./components/Table"
import Shop from "./components/Shop"
import Bian from "./components/BIan"
import Luosen from "./components/LuoSen"
import Guan from "./components/Guan"
import * as action from "./api/index"
import {bindActionCreators} from "redux"

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export class App extends Component {
  state = {
    collapsed: false,
  };
  componentDidMount(){
    this.props.getData()
  }
  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    console.log(this.props);
    let {routes} = this.props
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            {
              routes&&routes.map((item,index)=>{
                if (item.children) {
                 return <SubMenu key={index} icon={<UserOutlined />} title={item.title}>
                    {
                      item.children&&item.children.map((item,i)=>{
                        return  <Menu.Item key={i}>
                        <NavLink to={item.path}>{item.title}</NavLink>
                        </Menu.Item>
                      })
                    }
                  </SubMenu>
                }else {
                  return <Menu.Item key={index} icon={<PieChartOutlined />}>
                    <NavLink to={item.path}>{item.title}</NavLink>
                  </Menu.Item>
                }
              })
            }
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 ,width:"100%" ,height:"100%"}}>
              <Switch>
                <Route path="/home" component={Home} />
                <Route path="/table" component={Table}/>
                <Route path="/shop" component={Shop}/>
                <Route path="/bian" component={Bian}/>
                <Route path="/luosen" component={Luosen}/>
                <Route path="/guan" component={Guan}/>
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

const mapState = (state) =>{
  return {
    ...state.reducerName
  }
}

const mapDispatch = (dispatch)=>bindActionCreators(action,dispatch)

export default connect(mapState,mapDispatch)(App)
